<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no,email=no" name="format-detection">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>中欧营销服务平台</title>
        <link rel="stylesheet" href="../static/style/personal.css">
    </head>

    <body>

        <div class="page page-normal">

            <section class="personal-main has-bottom">
                <div class="personal-channel flex-v">
                    <section class="personal-title">
                        <h1>销量明细</h1>
                        <a href="javascript:void(0);" class="btn-link" id="btn-feedback">反馈</a>
                    </section>

                    <div class="channel-info flex-h">
                        <div class="flex-a-i">
                            <h1>123456</h1>
                            <h2>总份额</h2>
                        </div>
                        <div class="flex-a-i">
                            <h1>222222</h1>
                            <h2>总市值</h2>
                        </div>
                    </div>
                    <div class="channel-search">
                        <form>
                            <div class="flex-h">
                                <div class="flex-a-i">
                                    <div class="input-box">
                                        <input type="text" placeholder="渠道名称" class="input-search-result">
                                    </div>
                                    <div class="select-box">
                                        <select class="select-channel">
                                            <option value="-1">请选择渠道名称</option>
                                            <option value="1">渠道名称1</option>
                                            <option value="2">渠道名称2</option>
                                            <option value="3">渠道名称3</option>
                                            <option value="4">渠道名称4</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="btn-box">
                                    <a href="javascript:void(0);" class="btn-search"></a>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="channel-detail-list flex-a-i">
                        <form>
                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tr>
                                    <th class="radio-box"></th>
                                    <th>
                                        <p>基金名称</p>
                                        <p>净申购(元)</p>
                                    </th>
                                    <th>
                                        <p>基金名称</p>
                                        <p>基金代码</p>
                                    </th>
                                    <th>
                                        <p>保有份额</p>
                                        <p>基金市值(元)</p>
                                    </th>
                                </tr>
                                <tr>
                                    <td class="radio-box">
                                        <label>
                                            <input name="channel" type="radio">
                                            <i></i>
                                        </label>
                                    </td>
                                    <td>
                                        <p>招商银行上海支行</p>
                                        <p>123456.99</p>
                                    </td>
                                    <td>
                                        <p>中欧强德</p>
                                        <p>1660008</p>
                                    </td>
                                    <td>
                                        <p>123121.11</p>
                                        <p>222221.11</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="radio-box">
                                        <label>
                                            <input name="channel" type="radio">
                                            <i></i>
                                        </label>
                                    </td>
                                    <td>
                                        <p>招商银行上海支行</p>
                                        <p>123456.99</p>
                                    </td>
                                    <td>
                                        <p>中欧强德</p>
                                        <p>1660008</p>
                                    </td>
                                    <td>
                                        <p>123121.11</p>
                                        <p>222221.11</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="radio-box">
                                        <label>
                                            <input name="channel" type="radio">
                                            <i></i>
                                        </label>
                                    </td>
                                    <td>
                                        <p>招商银行上海支行</p>
                                        <p>123456.99</p>
                                    </td>
                                    <td>
                                        <p>中欧强德</p>
                                        <p>1660008</p>
                                    </td>
                                    <td>
                                        <p>123121.11</p>
                                        <p>222221.11</p>
                                    </td>
                                </tr>
                            </table>

                            <div class="feedback">
                                <textarea class="input-text" placeholder="如以上数据与您的真实销量有出入，欢迎您提供正确销量数据。"></textarea>

                                <div class="upload-image">
                                    <ul class="clearfix">
                                        <li>
                                            <div class="imgbox flex-v-c"><img src="../static/image/example-01.png"></div>
                                            <a href="javascript:void(0);" class="btn-close"></a>
                                        </li>
                                        <li>
                                            <div class="imgbox flex-v-c"><img src="../static/image/icon_file_pdf@2x.png"></div>
                                            <a href="javascript:void(0);" class="btn-close"></a>
                                        </li>
                                        <li>
                                            <div class="upload-box">
                                                <input type="file" class="input-file">
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="btn-box">
                                    <a href="javascript:void(0);" class="btn-submit">提交</a>
                                    <a href="javascript:void(0);" class="btn-submit btn-clickable">提交</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
            </section>
            
            <section class="column-footer">
                <div class="navbar">
                    <ul class="flex-h">
                        <li class="flex-a-i">
                            <a href="#" class="link-home">首页</a>
                        </li>
                        <li class="flex-a-i">
                            <a href="javascript:void(0);" class="link-column">精华栏目</a>
                            <div class="submenu">
                                <a href="#" class="link-opinion"></a>
                                <a href="#" class="link-read"></a>
                                <a href="#" class="link-idea"></a>
                            </div>
                        </li>
                        <li class="flex-a-i">
                            <a href="#" class="link-my active">个人中心</a>
                        </li>
                    </ul>
                </div>
            </section>
        </div>

        <section class="mask-confirm" style="display: none;"></section>
        <section class="mask-modal-confirm" style="display: none;">
            <div class="confirm-box">
                <h1>确定删除图片？</h1>
                <div class="btn-box">
                    <a href="javascript:void(0);" class="btn-cancle">取消</a>
                    <a href="javascript:void(0);" class="btn-ensure">确定</a>
                </div>
            </div>
        </section>

        <script src='../static/script/lib/jquery.2.0.0.min.js'></script>
        <script> 
            $(function() {
                // 
                $('.column-footer .navbar a.link-column').on('click', function() {
                    $(this).parent().find('.submenu').toggleClass('active');
                });


                // btn-feedback click
                var btnFeedback = $('#btn-feedback'),
                    feedbackBox = $('.feedback'),
                    radioBox = $('table .radio-box');

                btnFeedback.on('click', function() {
                    feedbackBox.toggle();
                    radioBox.toggle();
                });


                // upload-image btn-close click
                var btnImageClose = $('.upload-image .btn-close'),
                    mask = $('.mask-confirm'),
                    maskModal = $('.mask-modal-confirm'),
                    btnMaskCancle = maskModal.find('.btn-cancle'),
                    btnMaskEnsure = maskModal.find('.btn-ensure');

                btnImageClose.on('click', function() {
                    mask.fadeIn();
                    maskModal.fadeIn();
                });

                btnMaskCancle.on('click', function() {
                    mask.fadeOut();
                    maskModal.fadeOut();
                });

                btnMaskEnsure.on('click', function() {
                    mask.fadeOut();
                    maskModal.fadeOut();
                });

            });
        </script>
    </body>
</html>